@font-face {
    font-family: "selfFont";
    src:url('../../../../public/Quartz Regular.ttf');
}
.container {
    height:100%;
    position:relative;
    background-color:#091221;
    background-repeat: no-repeat;
    background-size:cover;
}

.float-container {
    position:absolute;
    top:20px;
    bottom:20px;
    width:20%;
    background-color:rgba(0,0,0,0.3);
    padding:0 1rem;
}

/* 
    监控大屏Card组件样式
*/
.card-container {
    height:100%;
    border-radius:4px;
    position:relative;
    color:rgba(0,0,0,.65);
}
.card-container .card-title {
    height:2rem;
    line-height:2rem;
    font-size:1rem;
    /* font-weight:bold; */
    display:flex;
    justify-content: space-between;
    color:rgba(0, 0, 0, 0.8);
    border-bottom:1px solid #1f5d87;
    white-space:nowrap;
}
.card-container .card-content {
    height:calc( 100% - 2rem );
}
/* 
    flex盒子样式
*/
.flex-container {
    display:flex;
    flex-wrap: wrap;
    align-items: center;
}

.flex-container .flex-item {
    width:50%;
    margin-bottom:1rem;
    display:flex;
    /* align-items: center; */
    white-space:nowrap;
}

.flex-item .flex-icon {
    width:38px;
    height:35px;
    background-repeat: no-repeat;
    background-size:cover;
    margin-right:0.5rem;
}
.flex-item .flex-text {
    font-size:0.8rem;
    color:#23b9f8;
}
.flex-item .flex-data {
    color:#fff;
    font-size:1.2rem;
    line-height:1.2rem;
    margin-right:4px;
}

.flex-item .flex-unit {
    font-size:0.8rem;
    color:rgba(255, 255, 255, 0.65);
}
/* 模态弹窗样式 */
.info-container {
    width:290px;
    display:none;
    position:absolute;
    z-index:10;
}
.info-title {
    background-color:#165dff;
    text-align:center;
    color:#fff;
    padding:0.5rem 1rem;
}
.info-content {
    background:rgba(0, 0, 0, 0.65);
    padding:1rem;
    border:1px solid #165dff;
}
.info-container.alarm .info-title {
    background-color:red;
}
.info-container.alarm .info-content {
    border:1px solid red;
}
.info-content .info-item {
    display:flex;
    align-items: center;
    color:rgba(255, 255, 255, 1);
}
.info-item .symbol {
    flex:1;
    height:1px;
    background:rgba(255, 255, 255, 0.45);
    margin:0 0.5rem;
}
/* 标题栏样式 */
.title-container {
    height:70px;
    padding:0 1rem;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size:contain;
    position:absolute;
    width:100%;
    top:0;
    background-position: 50% 0;
    z-index:10;
}

.weather-container {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left:2rem;
    color:rgba(255, 255, 255, 0.8);
    display:inline-flex;
    align-items: center;
}

.btn-group {
    position:absolute;
    top:0;
    right:2rem;
    z-index:2;
}

.btn-group > .btn-item {
    background-color:rgba(5, 119, 205, 0.5);
    border:1px solid #04d1cd;   
    margin-right: 1rem;
    padding: 4px 10px;
    color: #fff;
    /* transform: skew(-10deg); */
    display: inline-block; 
}

.title-container .title {
    color:rgba(255, 255, 255, 0.5);
    font-size:2rem;
    font-weight:bold;
    text-align: center;
    margin-top:4px;
    background-image:-webkit-linear-gradient(bottom, #d6eff8, #a4e3f0);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    letter-spacing: 0.5rem;
}

.spec-time {
    font-family:selfFont;
    font-size:2rem;
    color:#fff;
    margin-right:2rem;
    letter-spacing: 4px;
}

